{% extends 'base.twig' %}

{% block intro %}
    {% raw %}
    <div v-if="uploadStatus === 'success'">
        <template v-if="data">
            <p>{{ data.message }}</p>
            <img id="img" :src="data.url" alt="" width="200" height="200">
        </template>
    </div>
    <div v-else-if="uploadStatus === 'default'">
        <p>请选择上传文件</p>
    </div>
    <div v-else-if="uploadStatus === 'uploading'">
        <p>文件上传中...</p>
    </div>
    {% endraw %}
{% endblock %}

{% block form %}
<form id="uploadForm">
    <p><input type="file" @change="onFileChange" name="file" ref="fileInput"></p>
    <p><input @click="handleSubmit" type="button" :disabled="uploadStatus === 'uploading'" value="Upload"></p>
</form>
{% endblock %}

{% block script %}
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="importmap">
    {
        "imports": {
            "vue": "https://cdn.jsdelivr.net/npm/vue@3.3.8/dist/vue.esm-browser.prod.js"
        }
    }
</script>
<script type="module" src={{ url_for('static', filename="js/upload.js") }}></script>
{% endblock %}
